<!--
 * @Author: vn53el9 vn53el9@email.wal.mart.com
 * @Date: 2022-10-20 14:04:47
 * @LastEditors: Evan Liu
 * @LastEditTime: 2022-11-22 10:22:53
 * @FilePath: \ias_ui\src\views\coi\CBEC\components\price.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!-- <headline :headline="'价格'" /> -->
    <headline :headline="'价格'">
      <span v-if="inputIsDisabled2()" slot="head" style="color: red"> &nbsp;&nbsp;商品备案信息未维护，不可设置价格，请先维护商品备案信息 </span>
    </headline>
    <el-form ref="ruleForm" class="form" :model="goodsInfo" label-width="150px" size="mini" label-position="left">
      <el-row :gutter="gutter">
        <el-col :span="span" :xl="xl">
          <el-form-item label="商品编码" prop="itemNbr" :rules="{ required: true, message: '请输入商品编码', trigger: 'blur' }">
            <el-input v-model="goodsInfo.itemNbr" :disabled="isDisabled || readOnly" clearable class="marginRight" @blur="getPrice" />
          </el-form-item>
        </el-col>
        <el-col :span="span" :xl="xl">
          <el-form-item label="HS 编码" prop="hscode">
            <el-input v-model="goodsInfo.priceHs.hscode" disabled class="marginRight" />
          </el-form-item>
        </el-col>
        <el-col :span="span" :xl="xl">
          <el-form-item label="商品规格" prop="hostItemSpec">
            <el-input v-model="goodsInfo.priceHs.hostItemSpec" disabled class="marginRight" />
          </el-form-item>
        </el-col>
        <el-col :span="span" :xl="xl">
          <el-form-item label="商品总重量" prop="itemTotalWeight" :rules="{ required: true, message: '请输入商品总重量', trigger: 'blur' }">
            <el-input
              v-model="goodsInfo.itemTotalWeight"
              :disabled="inputIsDisabled()"
              clearable
              placeholder="请输入商品总重量"
              @change="handleChange"
              @input="handleInput"
            >
              <template slot="append">{{ priceInfo.taxUnitDesc || '毫升' }}</template>
            </el-input>
            <el-popover placement="bottom" trigger="click">
              <component :is="''" />
              <i slot="reference" class="el-icon-question" />
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="span" :xl="xl">
          <el-form-item label="含税价" prop="taxPrice" :rules="{ required: true, message: '请输入含税价', trigger: 'blur' }">
            <el-input
              v-model="goodsInfo.taxPrice"
              :disabled="inputIsDisabled()"
              clearable
              placeholder="请输入含税价"
              class="marginRight"
              @change="handleChange"
              @input="handleInput"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="span" :xl="xl">
          <el-form-item label="未税价" prop="outTaxPrice">
            <el-input v-model="goodsInfo.priceHs.outTaxPrice" disabled class="marginRight">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="span" :xl="xl">
          <el-form-item label="税率：" prop="comprehensiveTaxTxate">
            <el-input :value="taxTaxte()" disabled class="marginRight">
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="span" :xl="xl">
          <el-form-item label="税额：" prop="taxValue">
            <el-input v-model="goodsInfo.priceHs.taxValue" disabled class="marginRight">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import headline from '@/views/coi/components/headline.vue'
import { getHsCodeDetail, getItemTaxPrice } from '@/api/coi/CBEC/newProducts'
import eventBus from '@/utils/eventBus'
export default {
  components: {
    headline
  },
  props: {
    goodsInfo: {
      type: Object,
      required: true
    },
    isDisabled: {
      type: Boolean,
      default: true
    },
    gutter: {
      type: Number,
      default: 20
    },
    span: {
      type: Number,
      default: 12
    },
    xl: {
      type: Number,
      default: 8
    }
  },
  data() {
    return {
      priceInfo: {},
      readOnly: true
    }
  },
  watch: {
    goodsInfo: {
      handler(newValue, oldValue) {
        this.readOnly = ['edit', 'detail'].indexOf(this.$route.params.type) !== -1
        if (newValue.itemNbr) {
          this.getPrice()
        }
      },
      immediate: true
    }
  },
  methods: {
    inputIsDisabled() {
      if (this.$route.params.type === 'add') {
        const keys = Object.keys(this.priceInfo)
        return this.isDisabled || !keys.length
      }
      return this.isDisabled
    },
    inputIsDisabled2() {
      const keys = Object.keys(this.priceInfo)
      return !keys.length
    },
    taxTaxte() {
      if (this.goodsInfo.priceHs.comprehensiveTaxTxate === 0 || this.goodsInfo.priceHs.comprehensiveTaxTxate) {
        return this.goodsInfo.priceHs.comprehensiveTaxTxate * 100
      }
      return null
    },
    async getPrice() {
      try {
        if (!this.goodsInfo.itemNbr?.length) return
        eventBus.$emit('loadingChange', true)
        const param = [this.goodsInfo.itemNbr]
        const { code, result } = await getHsCodeDetail(param)
        if (code !== '0' || !result) {
          this.priceInfo = {}
          this.goodsInfo.priceHs = {}
          this.goodsInfo.taxPrice = null
          this.goodsInfo.itemTotalWeightd = null
          return
        }
        this.priceInfo = result[0]
        this.goodsInfo.priceHs.hscode = this.priceInfo.hscode
        this.goodsInfo.priceHs.hostItemSpec = this.priceInfo.hostItemSpec
      } catch (error) {
        console.log(error)
        this.priceInfo = {}
        this.goodsInfo.priceHs = {}
        this.goodsInfo.taxPrice = null
        this.goodsInfo.itemTotalWeight = null
      } finally {
        eventBus.$emit('loadingChange', false)
      }
    },
    async countPrice() {
      try {
        if (!this.goodsInfo.itemNbr?.length) {
          this.$message({
            type: 'warning',
            message: '请填写商品编码以便获取价格信息！'
          })
          return
        }
        eventBus.$emit('loadingChange', true)
        this.priceInfo.itemTotalWeight = this.goodsInfo.itemTotalWeight
        const param = {
          total: 1,
          itemId: this.goodsInfo.itemNbr,
          payAmount: Number(this.goodsInfo.taxPrice),
          taxDataOption: 1,
          taxInfo: this.priceInfo
        }
        const { code, result } = await getItemTaxPrice(param)
        if (code !== '0') return
        this.goodsInfo.priceHs = result || {}
        this.goodsInfo.priceHs.taxValue = result.taxPrice || null
        this.goodsInfo.priceHs.hscode = this.priceInfo.hscode || null
        this.goodsInfo.priceHs.hostItemSpec = this.priceInfo.hostItemSpec || null
      } catch (error) {
        console.log(error)
        this.goodsInfo.priceHs = {}
      } finally {
        eventBus.$emit('loadingChange', false)
      }
    },
    handleInput(e) {
      if (this.goodsInfo.taxPrice) this.goodsInfo.taxPrice = this.goodsInfo.taxPrice.match(/^[0-9]*(\.?[0-9]{0,2})/g)[0] || null
      if (this.goodsInfo.itemTotalWeight) this.goodsInfo.itemTotalWeight = this.goodsInfo.itemTotalWeight.match(/^[0-9]*(\.?[0-9]{0,2})/g)[0] || null
    },
    handleChange() {
      if (this.goodsInfo.itemTotalWeight?.length > 0 && this.goodsInfo.taxPrice?.length > 0) {
        this.countPrice()
      } else {
        this.goodsInfo.priceHs = { hscode: this.priceInfo.hscode, hostItemSpec: this.priceInfo.hostItemSpec }
      }
    },
    submitForm() {
      let flag = null
      this.$refs.ruleForm.validate((valid) => {
        flag = valid
      })
      if (!this.goodsInfo.priceHs.taxValue && this.goodsInfo.priceHs.taxValue !== 0) {
        this.$message({
          type: 'error',
          message: '价格信息缺失，请补全信息后提交!'
        })
        return false
      }
      const num = parseFloat(this.goodsInfo.taxPrice / 2)
      if (this.goodsInfo.priceHs.taxValue > num) {
        this.$message({
          type: 'error',
          message: '税额大于含税价的50％，请确认填写信息是否正确!'
        })
        return false
      }
      return flag
    }
  }
}
</script>

<style scoped lang="scss">
.form {
  margin: 0 10px;
  margin-top: 20px;
}
/deep/ .el-form-item__content {
  display: flex;
  align-items: center;
}
.el-icon-question {
  margin-left: 10px;
  cursor: pointer;
  font-size: 16px;
}
.marginRight {
  margin-right: 25px;
}
</style>
